<!-- post_detail -->
<template>
  <div class=''>
    <a-skeleton
      class="userInfo"
      :loading="loading"
      avatar
      active
    >
      <a-avatar
        :size="56"
        style="height:auto"
        icon="user"
        :src="postDetail.avator"
      />
      <div class="info">
        <div class="nameDiv">
          <div class="name">{{postDetail.name}}</div>
          <a-button
            v-if="myInfo.id == postDetail.uid"
            @click="goEditor"
          >编辑</a-button>
        </div>
        <div class="bottom">
          <a-icon
            type="tag"
            theme="twoTone"
          />
          <div class="time interval">{{postDetail.moment}}</div>
          <a-icon
            type="message"
            theme="twoTone"
          />
          <div class="comment interval">{{postDetail.comments}}</div>
          <a-icon
            type="eye"
            theme="twoTone"
            spin
          />
          <div class="pv interval">{{postDetail.pv}}</div>
        </div>
      </div>
    </a-skeleton>
    <a-skeleton
      :loading="loading"
      :paragraph="{ rows: 0 }"
      active
    >
      <div class="userInfo">
        <div class="title">
          <div class="name">{{postDetail.title}}</div>
        </div>
      </div>
    </a-skeleton>
    <a-skeleton
      :loading="loading"
      active
    >
      <mavon-editor
        class="md"
        :value="postDetail.content"
        :subfield="prop.subfield"
        :defaultOpen="prop.defaultOpen"
        :toolbarsFlag="prop.toolbarsFlag"
        :previewBackground="'#fff'"
        :editable="prop.editable"
        :scrollStyle="prop.scrollStyle"
        :ishljs="prop.ishljs"
        :externalLink="externalLink"
      ></mavon-editor>
    </a-skeleton>
    <div class="commentNow">
      <a-avatar
        :size="32"
        icon="user"
        :src="myInfo.avatar"
      />
      <div class="commentText">
        <a-textarea
          v-model="textarea"
          placeholder="输入评论..."
          autoSize
          class="commentInput"
        />
        <div class="commentBottom">
          <twemoji-picker
            :emojiData="emojiDataAll"
            :emojiGroups="emojiGroups"
            :skinsSelection="false"
            :searchEmojisFeat="true"
            searchEmojiPlaceholder="Search here."
            searchEmojiNotFound="Emojis not found."
            isLoadingLabel="Loading..."
            @emojiUnicodeAdded="onEnterKey"
          ></twemoji-picker>
          <a-button
            type="primary"
            @click="commentSubmit"
          >
            评论
          </a-button>
        </div>

      </div>
    </div>
    <a-skeleton
      :loading="loading"
      active
      avatar
    >
      <a-list
        class="comment-list"
        :header="`${commentLength} 条评论`"
        item-layout="horizontal"
        :data-source="commentData"
      >

        <a-list-item
          slot="renderItem"
          slot-scope="item"
        >

          <a
            slot="actions"
            v-if="item.id == myInfo.id"
            @click="postsCommentRemove(item.postid,item.id)"
          >删除</a>
          <a-comment
            :author="item.name"
            :avatar="item.avator"
          >
            <!-- <template slot="actions"> -->
            <!-- <span v-for="action in item.actions">{{ action }}</span> -->
            <!-- </template> -->
            <p slot="content">
              {{ item.content }}
            </p>
            <a-tooltip
              slot="datetime"
              :title="item.moment.format('YYYY-MM-DD HH:mm:ss')"
            >
              <span>{{ item.moment.fromNow()}}</span>
            </a-tooltip>
          </a-comment>

        </a-list-item>
      </a-list>
    </a-skeleton>
    <a-pagination
      class="pagination"
      show-quick-jumper
      :default-current="1"
      :total="commentLength"
      @change="onChange"
    />
    <a-back-top>
      <div class="ant-back-top-inner">
      </div>
    </a-back-top>
  </div>
</template>

<script>
import moment from 'moment';
moment.locale('zh-cn');
import * as api from "@/API/require"
import {
  TwemojiPicker
} from '@kevinfaguiar/vue-twemoji-picker';
import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/zh/emoji-all-groups.json';
// import EmojiDataAnimalsNature from '@kevinfaguiar/vue-twemoji-picker/emoji-data/zh/emoji-group-animals-nature.json';
// import EmojiDataFoodDrink from '@kevinfaguiar/vue-twemoji-picker/emoji-data/zh/emoji-group-food-drink.json';
import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
export default {
  components: {
    'twemoji-picker': TwemojiPicker
  },
  data () {
    return {
      loading: true,
      postDetail: {},
      commentLength: 0,
      commentData: [],
      myInfo: {},
      postId: '',
      textarea: '',
      externalLink: {
        markdown_css: function() {
          // 这是你的markdown css文件路径
          return '/markdown/github-markdown.min.css';
        },
        hljs_js: function() {
          // 这是你的hljs文件路径
          return '/highlightjs/highlight.min.js';
        },
        hljs_css: function(css) {
          // 这是你的代码高亮配色文件路径
          return '/highlightjs/styles/' + css + '.min.css';
        },
        hljs_lang: function(lang) {
          // 这是你的代码高亮语言解析路径
          return '/highlightjs/languages/' + lang + '.min.js';
        },
        katex_css: function() {
          // 这是你的katex配色方案路径路径
          return '/katex/katex.min.css';
        },
        katex_js: function() {
          // 这是你的katex.js路径
          return '/katex/katex.min.js';
        },
      }
    };
  },
  computed: {
    emojiDataAll () {
      return EmojiAllData;
    },
    emojiGroups () {
      return EmojiGroups;
    },
    prop () {
      let data = {
        previewBackground: '#fff',//预览版背景色
        subfield: false,// 单双栏模式
        defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true,
        ishljs: true
      }
      return data
    }
  },
  watch: {
    $route: {
      handler (newV) {
        if (newV.name == 'post_detail') {
          this.postId = this.$route.params.id
          this.getSinglePosts(this.postId)
          this.getComments(this.postId, 1)
        }
      },
      //   deep: true,
      immediate: true
    }
  },
  methods: {
    //   分页跳转
    onChange (pageNumber) {
      //   console.log('Page: ', pageNumber);
      this.getComments(this.postId, pageNumber)
    },
    onEnterKey (e) {
      this.textarea += e
    },
    // 发表评论
    commentSubmit () {
      console.log(JSON.stringify(this.textarea))
      api.comment({
        user: this.myInfo.user,
        uid: this.myInfo.id,
        content: this.textarea,
        postId: this.postId
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
          this.getComments(this.postId, 1)
        } else {
          this.$message.error(res.data.message)
        }

      })
    },
    // 获取文章
    getSinglePosts (id) {
      this.loading = true
      api.getSinglePosts({
        id: id
      }).then(res => {
        if (res.data.posts) {
          this.postDetail = res.data.posts
          this.commentLength = res.data.commentLength
        } else {
          this.$message.error(res.data.message, 2)
        }
        this.loading = false
      })
    },
    // 获取评论
    getComments (postId, page) {
      // 评论分页
      api.postsCommentPage({
        postId: postId,
        page: page
      }).then(res => {
        if (res.data) {
          this.commentData = res.data.map(item => {
            item.moment = moment(item.moment)
            return item
          })
        }
      })
    },
    // 修改文章
    goEditor () {
      this.$router.push({ name: 'editor', params: { id: this.postId } })
    },
    // 删除评论
    postsCommentRemove (postId, commentId) {
      api.postsCommentRemove({
        postId: postId,
        commentId: commentId,
        username: this.myInfo.user
      }).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message, 2)
          this.commentData = this.commentData.filter(item => {
            return item.id != commentId
          })
        } else this.$message.error(res.data.message, 2)
      })
    },
  },

  created () {
    let myInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.myInfo = myInfo
  },
  mounted () {

  },
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.userInfo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  margin: 4px auto;
  padding: 15px 3.5vw;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
  border-radius: 2px;
  .name {
    flex: 1;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  @{deep} .title {
    width: 100%;
    .name {
      .name;
    }
  }
  .info {
    width: 100%;
    margin-left: 10px;
    flex: 1;
    .name {
      .name;
    }
    .bottom {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .interval {
        margin: 0 10px 0 4px;
      }
    }
  }
}
.nameDiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.md {
  min-width: unset;
  position: static;
}
.v-note-wrapper
  @{deep}
  .v-note-panel
  @{deep}
  .v-note-show
  @{deep}
  .v-show-content {
  background-color: #fff !important;
}
.commentNow {
  background-color: #fff;
  margin: 20px auto;
  padding: 15px 3.5vw;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
  border-radius: 2px;
  display: flex;
  justify-content: flex-start;
  .commentText {
    width: 100%;
    .commentInput {
      margin-left: 10px;
    }
    .commentBottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 6px -10px 0 0;
      padding-left: 10px;
    }
  }
}
.comment-list {
  background-color: #fff;
  margin: 20px auto;
  padding: 15px 3.5vw;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
  border-radius: 2px;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ant-back-top {
  width: 10vw;
  height: 10vw;
  right: 0;
  .ant-back-top-inner {
    height: 10vw;
    width: 10vw;
    background-repeat: no-repeat;
    background-size: 100%;
    background-image: url(../../../public/backtop.png);
    line-height: 100px;
    border-radius: 4px;
    // color: #fff;
    text-align: center;
    font-size: 20px;
  }
}
</style>